<template>
  <div class="assignment-area">
    <h2 class="title">考试模块</h2>
    <div class="content">
      <!-- Left part: 布置试卷按钮，点击时通过函数跳转 -->
      <div class="left-part">
        <button class="assign-btn" @click="goToTestPaperPost">布置试卷</button>
      </div>

      <!-- Right part: 显示试卷列表 -->
      <div class="right-part">
        <!-- 额外的框住表格的容器 -->
        <div class="table-container">
          <table class="assignment-table">
            <thead>
              <tr>
                <th>试卷ID</th>
                <th>试卷名称</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(assignment, index) in assignments" :key="index">
                <td>{{ index + 1 }}</td> <!-- 显示从 1 开始的自增 ID -->
                <td>{{ assignment.name }}</td>
                <td>
                  <button class="view-btn" @click="viewAssignment(assignment.id)">查看</button>
                  <button class="delete-btn" @click="deleteAssignment(assignment.id)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="questions-area">
      <span class="paper-title">{{ questionTitle }}</span>
      <span class="question-content">{{ questionsContent }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

export default {
  data() {
    return {
      assignments: [], // 存储试卷数据
      courseId: this.$route.params.courseId, // 获取当前路由的 courseId 参数
      questionsContent:"",
      questionTitle:""
    };
  },
  mounted() {
    this.loadAssignments();
  },
  methods: {
    // 请求并加载试卷数据
    async loadAssignments() {
      try {
        const response = await axios.get(`/exam/listPapersByCourse/${this.courseId}`);
        // 根据试卷ID进行排序，从小到大
        const sortedAssignments = response.data.sort((a, b) => a.id - b.id);
        this.assignments = sortedAssignments.map(paper => ({
          id: paper.id,
          name: paper.name,
        }));
      } catch (error) {
        console.error('获取试卷列表失败:', error);
      }
    },

    // 查看试卷
    viewAssignment(id) {
      console.log('查看试卷ID:', id);
      axios.get(`/exam/getPaper/${id}`).then(resp=>{
        const data=resp.data;
        this.questionTitle=data.name;
        this.questionsContent="";
        function switchQuestionType(typestr){
          if(typestr=="single_choice"){
            return "单选题"
          }else if(typestr=="multiple_choice"){
            return "多选题"
          }else if(typestr=="fill_in_the_blank"){
            return "填空题"
          }else if(typestr=="short_answer"){
            return "简答题"
          }else{
            return "未知题型"
          }
        }
        function unfoldOptions(options){
          let AASCII=65;
          if(options.length==0){
            return ""
          }else{
            let opStr="";
            for(let ij=0;ij<options.length;ij++){
              opStr+=`${String.fromCharCode(AASCII+ij)}. ${options[ij]}     `
            }
            return opStr+"\n"
          }
        }
        for(let i=0;i<data.questions.length;i++){
          this.questionsContent+=`${i}. (${switchQuestionType(data.questions[i].type)})${data.questions[i].content} (${data.questions[i].score}分)\n${unfoldOptions(data.questions[i].options)}\n\n`
        }
      })

    },

    // 删除试卷
    deleteAssignment(id) {
      console.log('删除试卷ID:', id);
      // 删除试卷的逻辑（例如发请求）
      this.assignments = this.assignments.filter(assignment => assignment.id !== id);
    },

    goToTestPaperPost() {
      const courseId = this.courseId; // 获取当前课程的 ID
      this.$router.push({ name: 'teacher-testpaperpost', params: { courseId }}); // 跳转到布置试卷页面
    },
  },
};
</script>

<style scoped>
.assignment-area {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.title {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
}

.content {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两个部分分别居左和居右 */
  align-items: flex-start; /* 上对齐 */
}

.left-part {
  width: 30%;
  display: flex;
  justify-content: flex-start;
}

.right-part {
  width: 65%;
  padding: 20px;
}

.table-container {
  border: 2px solid #ddd; /* 给表格容器加一个边框 */
  border-radius: 10px; /* 圆角 */
  padding: 10px; /* 内边距 */
  background-color: #fff; /* 背景颜色为白色 */
}

.assignment-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.assignment-table th,
.assignment-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.assignment-table th {
  background-color: #f4f4f4;
}

.assignment-table button {
  margin: 0 5px;
  padding: 5px 10px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.view-btn {
  background-color: #4caf50;
  color: white;
}

.view-btn:hover {
  background-color: #45a049;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

/* 布置试卷按钮样式 */
.assign-btn {
  font-size: 18px;
  padding: 10px 20px;
  color: white;
  background-color: #4caf50;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.assign-btn:hover {
  background-color: #45a049;
}

.questions-area{
  width: 80%;
  max-height: 30vh;
  border: #7f7f7f 1px solid;
  border-radius: 6px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-direction: column;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  margin: auto;
  /* margin: 10px 20px; */
  & span{
    width: 100%;
    white-space: pre-wrap;
  }
  &  .question-content{
    height: 100%;
  }
  & .paper-title{
    font-weight: bolder;
    text-align: center;
    font-size: 1.6rem;
  }
}
</style>
